<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css">
  <style>
    #image-map {
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
<div id="image-map"></div>

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script>
  // Using leaflet.js to pan and zoom a big image.
  // See also: http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html
  // create the slippy map
  var map = L.map('image-map', {
    minZoom: 1,
    maxZoom: 4,
    center: [0, 0],
    zoom: 1,
    crs: L.CRS.Simple
  });
  // dimensions of the image
  var w = 4000,
    h = 3000,
    url = 'http://leafletjs.com/examples/crs-simple/uqm_map_full.png';
  // calculate the edges of the image, in coordinate space
  var southWest = map.unproject([0, h], map.getMaxZoom()-1);
  var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
  var bounds = new L.LatLngBounds(southWest, northEast);
  // add the image overlay,
  // so that it covers the entire map
  L.imageOverlay(url, bounds).addTo(map);
  // tell leaflet that the map is exactly as big as the image
  map.setMaxBounds(bounds);
</script>

</body>
</html>
